<template>
    <div class="login_wrap">
        <div class="login_content">
            <!-- <h1 class="header">智能管理系统</h1> -->
            <div class="login_main flex-row">
                <div class="login_side">
                    <p class="welcome">欢迎使用</p>
                    <p class="system">智能管理系统</p>
                    <p class="site_footer">©{{ year }} 我们的有限公司</p>
                </div>
                <div class="login_form">
                    <h2 class="title">欢迎登录</h2>
                    <LoginForm />
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import LoginForm from './components/form.vue'

//年份
let year = ref<number>(2022);
let today = new Date();
year.value = today.getFullYear();
</script>
<style lang="scss" scoped>
.login_wrap {
    position: relative;
    width: 100vw;
    height: 100vh;
    background-color: var(--side-bg);
    overflow: hidden;

    .login_content {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        .header {
            font-size: 60px;
            color: #fff;
            text-align: center;
            letter-spacing: 10px;
        }
        .login_side,
        .login_form {
            position: relative;
            width: 480px;
            height: 480px;
            background-color: #fff;
        }
        .login_side {
            background-image: url('@/assets/login_side.png');

            .welcome {
                margin-top: 140px;
                font-size: 44px;
            }

            .system {
                font-size: 54px;
            }

            .welcome,
            .system {
                margin-left: 40px;
                line-height: .8;
                color: #fff;
                letter-spacing: 6px;
            }

            .site_footer {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                text-align: center;
                font-size: 12px;
                color: #eeeded;
            }
        }
        .login_form{
            padding: 30px 60px;
            box-sizing: border-box;
            .title {
                margin: 10px 0 40px;
                font-size: 36px;
                color: var(--title-color);
                text-align: center;
                letter-spacing: 10px;
                font-weight: 600;
            }
        }
    }
}
</style>